<template>
	<view class="u-p-20">
		<view class="u-border u-p-20" @click="getDetail">
			<w-home-item title="用户姓名" :value="item.name"></w-home-item>
			<u-gap height="5" bg-color="#ffffff"></u-gap>
			<w-home-item title="用户电话" :value="item.mobile"></w-home-item>
			<u-gap height="5" bg-color="#ffffff"></u-gap>
			<w-home-item title="投诉内容" :value="item.content"></w-home-item>
			<u-gap height="5" bg-color="#ffffff"></u-gap>
			<w-home-item title="处理状态" :value="item.stateName"></w-home-item>
		</view>
		<u-popup v-model="show" mode="center" closeable border-radius='8' width='75%'>
				<view class="u-p-40">
					<view class="">
						照片：<text v-if="!item.photo">未上传</text>
					</view>
					<u-image v-if='item.photo' width="100%" height="300rpx" mode='aspectFit' :src="item.photo" @click='previewImage(item.photo)'></u-image>
					<view class="u-m-t-5">
						姓名：{{item.name}}
					</view>
					<view class="u-m-t-5">
						电话：{{item.mobile}}
					</view>
					<view class="u-m-t-5">
						投诉内容：{{item.content}}
					</view>
					<view class="u-m-t-5">
						处理状态：{{item.stateName}}
					</view>
					<view class="u-m-t-5">
						申请时间：{{item.createDate}}
					</view>
					<view class="u-flex u-row-around u-m-t-20">
						<u-button type="error" size="medium" @click="del">删除</u-button>
						<u-button v-if='item.stateName=="未处理"' type="primary" size="medium" @click="change">修改</u-button>
					</view>
				</view>
			</u-popup>
	</view>
</template>

<script>
	export default {
		name:"w-complaint-list",
		props: {
			item: {
				type: Object,
				default: ()=>{
					return {}
				}
			},
		},
		data() {
			return {
				show:false
			};
		},
		methods: {
			getDetail() {
				this.$store.commit('setItemInfo',this.item)
				this.show = true
			},
			previewImage(photo) {
				uni.previewImage({
					urls: [photo],
				});
			},
			del() {
				uni.showModal({
					title: '提示',
					content: '确定要删除此条投诉？',
					success: (res) => {
						if (res.confirm) {
							this.show = false
							this.$emit('delect', this.item.id, this.index)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			change() {
				this.$u.route({
					url: '/pages/index/complaint/complaint',
					params: {
						id: this.item.id
					}
				})
			}
		},
	}
</script>

<style>
.u-border:after {
	border-radius: 30rpx;
}
</style>
